<template>
  <div class="encode-config">
    <el-form-item label="转码配置">
      <el-select v-model="selectedPreset" placeholder="选择预设配置" @change="handlePresetChange">
        <el-option
          v-for="(preset, key) in encodePresets"
          :key="key"
          :label="preset.label"
          :value="key"
        />
      </el-select>
    </el-form-item>

    <el-collapse v-model="advancedVisible" accordion>
      <el-collapse-item title="高级配置" name="advanced">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分辨率">
              <el-select v-model="encodeConfig.resolution" placeholder="选择分辨率">
                <el-option label="1920x1080 (1080P)" value="1920x1080" />
                <el-option label="1280x720 (720P)" value="1280x720" />
                <el-option label="854x480 (480P)" value="854x480" />
                <el-option label="640x360 (360P)" value="640x360" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="帧率">
              <el-select v-model="encodeConfig.fps" placeholder="选择帧率">
                <el-option label="30 fps" :value="30" />
                <el-option label="25 fps" :value="25" />
                <el-option label="24 fps" :value="24" />
                <el-option label="20 fps" :value="20" />
                <el-option label="15 fps" :value="15" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="视频码率">
              <el-select v-model="encodeConfig.video_bitrate" placeholder="选择视频码率">
                <el-option label="8000 kbps" value="8000k" />
                <el-option label="6000 kbps" value="6000k" />
                <el-option label="4000 kbps" value="4000k" />
                <el-option label="2000 kbps" value="2000k" />
                <el-option label="1000 kbps" value="1000k" />
                <el-option label="500 kbps" value="500k" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="音频码率">
              <el-select v-model="encodeConfig.audio_bitrate" placeholder="选择音频码率">
                <el-option label="256 kbps" value="256k" />
                <el-option label="192 kbps" value="192k" />
                <el-option label="128 kbps" value="128k" />
                <el-option label="96 kbps" value="96k" />
                <el-option label="64 kbps" value="64k" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="视频编码">
              <el-select v-model="encodeConfig.video_codec" placeholder="选择视频编码">
                <el-option label="H.264 (libx264)" value="libx264" />
                <el-option label="H.265 (libx265)" value="libx265" />
                <el-option label="MPEG-4 (libxvid)" value="libxvid" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="音频编码">
              <el-select v-model="encodeConfig.audio_codec" placeholder="选择音频编码">
                <el-option label="AAC" value="aac" />
                <el-option label="MP3" value="libmp3lame" />
                <el-option label="Opus" value="libopus" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码预设">
              <el-select v-model="encodeConfig.preset" placeholder="选择编码预设">
                <el-option label="Ultra Fast (超快)" value="ultrafast" />
                <el-option label="Super Fast (超快)" value="superfast" />
                <el-option label="Very Fast (很快)" value="veryfast" />
                <el-option label="Faster (更快)" value="faster" />
                <el-option label="Fast (快)" value="fast" />
                <el-option label="Medium (中等)" value="medium" />
                <el-option label="Slow (慢)" value="slow" />
                <el-option label="Slower (更慢)" value="slower" />
                <el-option label="Very Slow (很慢)" value="veryslow" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="H.264 Profile">
              <el-select v-model="encodeConfig.profile" placeholder="选择Profile">
                <el-option label="Baseline (基线)" value="baseline" />
                <el-option label="Main (主要)" value="main" />
                <el-option label="High (高)" value="high" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { ref, watch, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'EncodeConfig',
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const selectedPreset = ref('high')
    const advancedVisible = ref([''])
    const encodeConfig = reactive({
      resolution: '1920x1080',
      video_bitrate: '4000k',
      audio_bitrate: '128k',
      fps: 25,
      video_codec: 'libx264',
      audio_codec: 'aac',
      preset: 'medium',
      profile: 'high',
      level: '4.1'
    })

    const encodePresets = ref({})

    // 加载预设配置
    const loadEncodePresets = async () => {
      try {
        const response = await fetch('/api/tasks/encode-presets')
        const presets = await response.json()
        encodePresets.value = Object.entries(presets).reduce((acc, [key, value]) => {
          acc[key] = {
            ...value,
            label: getPresetLabel(key)
          }
          return acc
        }, {})
      } catch (error) {
        ElMessage.error('加载转码预设失败')
        console.error('加载转码预设失败:', error)
      }
    }

    const getPresetLabel = (preset) => {
      const labels = {
        ultra_high: '超高质量',
        high: '高质量',
        medium: '中等质量',
        low: '低质量'
      }
      return labels[preset] || preset
    }

    const handlePresetChange = (presetKey) => {
      if (encodePresets.value[presetKey]) {
        Object.assign(encodeConfig, encodePresets.value[presetKey])
      }
    }

    // 监听配置变化并通知父组件
    watch(encodeConfig, (newConfig) => {
      emit('update:modelValue', newConfig)
    }, { deep: true })

    // 监听props变化
    watch(() => props.modelValue, (newValue) => {
      if (newValue && Object.keys(newValue).length > 0) {
        Object.assign(encodeConfig, newValue)
      }
    }, { deep: true, immediate: true })

    onMounted(() => {
      loadEncodePresets()
    })

    return {
      selectedPreset,
      advancedVisible,
      encodeConfig,
      encodePresets,
      handlePresetChange
    }
  }
}
</script>

<style scoped>
.encode-config {
  margin-bottom: 20px;
}

.el-collapse {
  margin-top: 10px;
}

.el-collapse-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>